<template>
  <div id="app">
    <h1>APP根标签</h1>
    <table>
      <tr>
        <td><a href="#/home">首页</a></td>
        <td><a href="#/movie">电影</a></td>
        <td><a href="#/about">关于</a></td>
      </tr>
    </table>
    <div class="box">
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import Home from "@/components/Home.vue";
import Movie from "@/components/Movie.vue";
import About from "@/components/About.vue";

export default {
  name: "App",
  components: {
    Home,
    Movie,
    About,
  },
  created() {
    // 只要当前app被创建，立即监听window对象的onhashchange
    window.onhashchange = () => {
      console.log("hash地址变化了" + location.hash);
      switch (location.hash) {
        case "#/home":
          this.comName = "Home";
          break;
        case "#/movie":
          this.comName = "Movie";
          break;
        case "#/about":
          this.comName = "About";
          break;
      }
    };
  },
  data() {
    return {
      comName: "home",
    };
  },
};
</script>

<style lang="less">
</style>
